$(function () {
  // 完成rem适配（动态根据页面宽度设置rem的基准值-->html标签font-size）
  // - 设计稿是1920px ，约定rem基准值为 24px 。
  // - 意味着：1rem === 24px
  // - 那么：设备宽度与rem基准值比例为 80 。
  // - 结论：适配设备的时候保持80的比例即可。
  // 自调用函数
  (function () {
    window.onresize = function () {
      let width = document.documentElement.clientWidth
      if (width < 1024) {
        width = 1024
      }
      if (width > 1920) {
        width = 1920
      }
      document.documentElement.style.fontSize = width / 80 + 'px'
    }
  })();
  // 监控区域
  (function () {
    // 获取元素 注册事件 点击tab栏切换对应效果
    $('.left-column').on('click', '.taps a', function () {
      $(this).addClass('active').parent().siblings().children().removeClass('active');
      // console.log(this.dataset.index)
      $('.left-column .fault-list').eq(this.dataset.index).show().siblings('.fault-list').hide()
      // console.log($(this))
    })
    // 克隆节点 先循环ul里面的元素 将ul里面的子元素克隆一份将其重新添加回ul结构里面
    $('.left-column .fault-list ul').each(function () {
      let $row = $(this).children().clone();
      $(this).append($row);
    })
  })();

  // 站点统计
  (function () {
    // 获取放置饼状数据图表的区域
    let myChart = echarts.init(document.querySelector('.station .station-map'));
    // 指定图表的配置项和数据
    let option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      series: [{
        name: '面积模式',
        type: 'pie',
        radius: [15, 42],
        center: ['50%', '50%'],
        roseType: 'area',
        data: [{
            value: 10,
            name: '大龙燚'
          },
          {
            value: 5,
            name: '大嘴猫'
          },
          {
            value: 15,
            name: '小龙坎'
          },
          {
            value: 25,
            name: '豫江南'
          },
          {
            value: 20,
            name: '谭鸭血'
          },
          {
            value: 35,
            name: '陈记顺和'
          },
          {
            value: 30,
            name: '八合里海记'
          },
          {
            value: 40,
            name: '牛表哥'
          }
        ]
      }]
    };
    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
  })();

  // 用户总量统计
  (function () {
    // 获取放置总量用户数据的区域
    let myUsers = echarts.init(document.querySelector('.users .users-map'));
    // 指定图表的配置项和数据
    let option = {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        top: '5%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        show: true,
        borderColor: 'rgba(0, 240, 255, 0.3)'
      },
      xAxis: [{
        type: 'category',
        data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
        axisTick: {
          alignWithLabel: true
        },
        // 设置水平轴上的文本颜色
        axisLabel: {
          color: "#3398db"
        }
      }],
      yAxis: [{
        type: 'value',
        // 设置y轴的平行线颜色
        splitLine: {
          lineStyle: {
            // 使用深浅的间隔色
            color: '#3398db'
          }
        },
        // 设置垂直轴上的文本颜色
        axisLabel: {
          color: "#3398db"
        }
      }],
      // 设置柱状图的样式
      series: [{
        name: '直接访问',
        type: 'bar',
        barWidth: '40%',
        data: [2100, 1900, 1700, 1560, 1400, 1200, 1200, 1200, 900, 750, 600, 480, 240],
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#00fffb' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#0061ce' // 100% 处的颜色
          }]
        }
      }]
    }
    // 使用刚指定的配置项和数据显示图表
    myUsers.setOption(option);
  })();
  // 中国地图
  (function () {
    // 初始化地图 准备一个放置地图的区域
    let myMap = echarts.init(document.querySelector('.center-column .map'));
    // 准备地图数据
    let data = [{
        name: '江苏',
        value: 5.3
      },
      {
        name: '北京',
        value: 3.8
      },
      {
        name: '上海',
        value: 4.6
      },
      {
        name: '重庆',
        value: 3.6
      },
      {
        name: '河北',
        value: 3.4
      },
      {
        name: '河南',
        value: 3.2
      },
      {
        name: '云南',
        value: 1.6
      },
      {
        name: '辽宁',
        value: 4.3
      },
      {
        name: '黑龙江',
        value: 4.1
      },
      {
        name: '湖南',
        value: 2.4
      },
      {
        name: '安徽',
        value: 3.3
      },
      {
        name: '山东',
        value: 3.0
      },
      {
        name: '新疆',
        value: 1
      },
      {
        name: '江苏',
        value: 3.9
      },
      {
        name: '浙江',
        value: 3.5
      },
      {
        name: '江西',
        value: 2.0
      },
      {
        name: '湖北',
        value: 2.1
      },
      {
        name: '广西',
        value: 3.0
      },
      {
        name: '甘肃',
        value: 1.2
      },
      {
        name: '山西',
        value: 3.2
      },
      {
        name: '内蒙古',
        value: 3.5
      },
      {
        name: '陕西',
        value: 2.5
      },
      {
        name: '吉林',
        value: 4.5
      },
      {
        name: '福建',
        value: 2.8
      },
      {
        name: '贵州',
        value: 1.8
      },
      {
        name: '广东',
        value: 3.7
      },
      {
        name: '青海',
        value: 0.6
      },
      {
        name: '西藏',
        value: 0.4
      },
      {
        name: '四川',
        value: 3.3
      },
      {
        name: '宁夏',
        value: 0.8
      },
      {
        name: '海南',
        value: 1.9
      },
      {
        name: '台湾',
        value: 0.1
      },
      {
        name: '香港',
        value: 0.1
      },
      {
        name: '澳门',
        value: 0.1
      }
    ];

    var yData = [];
    var barData = [];

    for (var i = 0; i < 10; i++) {
      barData.push(data[i]);
      yData.push(i + data[i].name);
    }

    let option = {
      title: [{
        show: true,
        text: '排名情况',
        textStyle: {
          color: '#2D3E53',
          fontSize: 18
        },
        right: 180,
        top: 100
      }],
      tooltip: {
        show: true,
        formatter: function (params) {
          return params.name + '：' + params.data['value'] + '%'
        },
      },
      visualMap: {
        type: 'continuous',
        orient: 'horizontal',
        itemWidth: 10,
        itemHeight: 80,
        text: ['高', '低'],
        showLabel: true,
        seriesIndex: [0],
        min: 0,
        max: 2,
        inRange: {
          color: ['#6FCF6A', '#FFFD64', '#FF5000']
        },
        textStyle: {
          color: '#7B93A7'
        },
        bottom: 30,
        left: 'left',
      },
      grid: {
        right: 10,
        top: 135,
        bottom: 100,
        width: '20%'
      },
      xAxis: {
        show: false
      },
      yAxis: {
        type: 'category',
        inverse: true,
        nameGap: 16,
        axisLine: {
          show: false,
          lineStyle: {
            color: '#ddd'
          }
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: '#ddd'
          }
        },
        axisLabel: {
          interval: 0,
          margin: 85,
          textStyle: {
            color: '#455A74',
            align: 'left',
            fontSize: 14
          },
          rich: {
            a: {
              color: '#fff',
              backgroundColor: '#FAAA39',
              width: 20,
              height: 20,
              align: 'center',
              borderRadius: 2
            },
            b: {
              color: '#fff',
              backgroundColor: '#4197FD',
              width: 20,
              height: 20,
              align: 'center',
              borderRadius: 2
            }
          },
          formatter: function (params) {
            if (parseInt(params.slice(0, 1)) < 3) {
              return [
                '{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
              ].join('\n')
            } else {
              return [
                '{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
              ].join('\n')
            }
          }
        },
        data: yData
      },
      geo: {
        // roam: true,
        map: 'china',
        left: 'left',
        right: '300',
        // layoutSize: '80%',
        label: {
          emphasis: {
            show: false
          }
        },
        itemStyle: {
          emphasis: {
            areaColor: '#fff464'
          }
        }
      },
      series: [{
        name: 'mapSer',
        type: 'map',
        roam: false,
        geoIndex: 0,
        label: {
          show: false,
        },
        data: data
      }, {
        name: 'barSer',
        type: 'bar',
        roam: false,
        visualMap: false,
        zlevel: 2,
        barMaxWidth: 8,
        barGap: 0,
        itemStyle: {
          normal: {
            color: function (params) {
              // build a color map as your need.
              var colorList = [{
                  colorStops: [{
                    offset: 0,
                    color: '#FFD119' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#FFAC4C' // 100% 处的颜色
                  }]
                },
                {
                  colorStops: [{
                    offset: 0,
                    color: '#00C0FA' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#2F95FA' // 100% 处的颜色
                  }]
                }
              ];
              if (params.dataIndex < 3) {
                return colorList[0]
              } else {
                return colorList[1]
              }
            },
            barBorderRadius: 15
          }
        },
        data: barData
      }]
    };
    myMap.setOption(option);
  })();
  // 订单量
  (function () {
    // 准备数据
    var data = {
      data365: {
        orders: '20,301,987',
        amount: '99834'
      },
      data90: {
        orders: '301,987',
        amount: '9834'
      },
      data30: {
        orders: '1,987',
        amount: '3834'
      },
      data24: {
        orders: '987',
        amount: '834'
      }
    }
    // 事件委托
    $('.indent-title').on('click', 'a', function () {
      $(this).addClass('active').siblings().removeClass('active');
      // 获取到当前的事件索引
      let dataType = $(this).data('type');
      // 点击不同的标签切换不同的数据
      // 获取数据
      let cdata = data[dataType];
      // console.log(cdata)
      // 渲染数据
      let oneHF = $('.indent-data h4:eq(0)');
      let towHF = $('.indent-data h4:eq(1)');
      $(oneHF).html(cdata.orders);
      $(towHF).html(cdata.amount)
    })
    // 自动切换
    let index = 0;
    let allA = $('.indent-title a');
    let timer = setInterval(function () {
      index++;
      if (index == allA.length) {
        index = 0;
      }
      $(allA).eq(index).click();
    }, 1500);
  })();
  // 销售额统计
  (function () {
    // 准备数据
    var data = {
      year: [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ],
      quarter: [
        [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
      ],
      month: [
        [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
      ],
      week: [
        [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
      ]
    }
    // 准备放置线状图的区域
    let myLinear = echarts.init(document.querySelector('.liner'));
    // 数据模型
    let option = {
      grid: {
        top: '15%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        show: true,
        borderColor: 'rgba(0, 240, 255, 0.3)'
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          color: "#3398db"
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: "#3398db"
        }
      },
      series: [{
          data: data.year[0],
          type: 'line',
          smooth: true,
          color: "#3398db"
        },
        {
          data: data.year[1],
          type: 'line',
          smooth: true
        },
      ]
    };
    // 使用刚指定的配置项和数据显示图表
    myLinear.setOption(option);
    // 点击切换
    $('.market-tilte .time').on('click', 'a', function () {
      $(this).addClass('setting').siblings().removeClass('setting');
      // 切换到对应的数据表
      let dataType = $(this).data('type');
      // console.log(dataType);
      let cdata = data[dataType];
      option.series[0].data = cdata[0];
      option.series[1].data = cdata[1];
      // 重新渲染页面
      myLinear.setOption(option);
    })
    // 自动切换
    let index = 0;
    let allA = $('.time a');
    setInterval(() => {
      index++;
      if (index >= allA.length) {
        index = 0;
      }
      $(allA[index]).click();
    }, 1000);
  })();
  // 销售进度
  (function () {
    // 获取元素
    let myPie = echarts.init(document.querySelector('.bridge'));
    // 配置数据
    let option = {
      series: [{
        name: '',
        type: 'pie',
        // 设置大小
        radius: ['110%', '145%'],
        // 设置中心位置
        center: ['50%', '100%'],
        avoidLabelOverlap: false,
        // 设置旋转角度 因为我们只要一半
        startAngle: 180,
        // 鼠标上浮不会变大
        hoverOffset: 0,
        labelLine: {
          show: false
        },
        // 图表数据
        data: [{
            value: 315,
            name: '直接访问',
            // 图表样式设置
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#00fffb' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#0061ce' // 100% 处的颜色
                }],
              }
            }
          }

        ]
      }]
    };
    // 使用配置数据
    myPie.setOption(option);
  })();
})